<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同详情</title>
    <link rel="stylesheet" href="../css/black.css" />
    <style>
        .btn-yellow {
            background-color: #FFC000;
            color: black;
        }

        .btn-dark-gray {
            background-color: #44546A;
        }

        .btn-skyblue {
            background-color: #00B0F0;
        }

        .inf-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 10px;
            font-size: 15px;
        }

        .gj {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        h3 {
            margin: 20px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="toolbar">
            <button class="btn btn-yellow">编辑</button>
            <button class="btn btn-red">删除</button>
            <button class="btn btn-dark-gray">变更责任人</button>
            <button class="btn btn-skyblue">改为回款完毕</button>
            <button class="btn btn-green">改为回款中</button>
        </div>
        <div class="information">
            <h3>合同基本信息</h3>
            <div class="inf-grid">
                <div class="rol">合同编号</div>
                <div class="rol">xxxxx</div>
                <div class="rol">合同名称</div>
                <div class="rol">xxxxx</div>
                <div class="rol">客户名称</div>
                <div class="rol">xxxxx</div>
                <div class="rol">负责人</div>
                <div class="rol">xxxxx</div>
                <div class="rol">商机名称</div>
                <div class="rol">xxxxx</div>
                <div class="rol">签订时间</div>
                <div class="rol">xxxxx</div>
                <div class="rol">合同金额</div>
                <div class="rol">xxxxx</div>
                <div class="rol">回款状态</div>
                <div class="rol">回款中/回款完毕</div>
                <div class="rol">客户签约人</div>
                <div class="rol">xxxxx</div>
                <div class="rol">公司签约人</div>
                <div class="rol">xxxxx</div>
                <div class="rol">备注</div>
                <div class="rol content">xxxxx</div>
            </div>
        </div>
        <div class="contact">
            <h3>联系人</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>职务</th>
                        <th>电话</th>
                        <th>性别</th>
                        <th>电子邮箱</th>
                        <th>是否为决策人</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>是</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>否</td>
                    </tr>
                    <tr>
                        <td>xxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxx</td>
                        <td>xxx</td>
                        <td>xxxxxxxxxx</td>
                        <td>否</td>
                    </tr>
                </tbody>
            </table>
        </div>
</body>
</html>